<template>
	<div class="matching">
		<TopInfo />
		<TopTabs @func="LoadValue" />
		<div class="content">
			<!-- <div class="filter-part">
        <div class="search-part">
          <el-input
            placeholder="请输入关键词搜索"
            v-model="keywords"
            prefix-icon="el-icon-search"
            class="input-with-select"
            @keyup.enter.native="SearchList()"
          >
            <el-button slot="append" type="primary" @click="SearchList()"
              >搜索</el-button
            >
          </el-input>
        </div>
      </div> -->
			<div class="match-count">
				为你查找到<span>{{ count }}</span
				>条记录
			</div>
			<ul v-if="active == 1" class="matching-list" v-loading="IsLoading">
				<li
					v-for="item in resourceData1"
					:key="item.Id"
					@click="ToCompany(item.EntName)"
				>
					<div class="line1">
						{{ item.EntName }}
						<span class="ct">
							{{ item.CertNo ? item.CertNo : "" }}
						</span>
						<span class="fr">{{
							item.EndDate ? "获得年份：" + item.EndDate : ""
						}}</span>
					</div>
					<!-- <div class="line2">职称：{{ item.Title }}</div> -->
					<!-- <div class="line3">
            <span class="fl">受理部门：湖南省科学技术厅</span>
          </div> -->
					<!-- <div class="line4">
						<span class="fl">电话：{{ item.Telphone }}</span>
						<span class="fr">{{ item.SendDate }}</span>
					</div> -->
				</li>
			</ul>
			<div class="pagin">
				<el-pagination
					background
					:hide-on-single-page="true"
					layout="total, prev, pager, next"
					@current-change="handleIndexChangeSj"
					:total="Sjtotal"
				>
				</el-pagination>
			</div>
		</div>
		<BottomInfo />
	</div>
</template>

<script>
import BottomInfo from "../components/BottomInfo";
import TopInfo from "../components/TopInfo";
import TopTabs from "../components/TopTabs";
export default {
	name: "Industry",
	data() {
		return {
			keywords: "",
			industrytypename: "",
			cityname: "",
			areaname: "",
			active: 1,
			limit: 10,
			SjPage: 1,
			count: 0,
			resourceData1: [],
			Sjtotal: 0,
			IsLoading: false,
		};
	},
	methods: {
		LoadValue(data) {
			this.active = data;
			this.keywords = "";
			this.GetList();
		},
		GetList() {
			this.IsLoading = true;
			let url = "/Statist/GetEntListByDataType";
			this.$axios({
				url,
				method: "post",
				data: {
					limit: this.limit,
					page: this.SjPage,
					city: this.cityname,
					area: this.areaname,
					typename: this.industrytypename,
					// userdata: this.$cookies.get("userdata"),
					// title: this.keywords,
				},
				transformRequest: [
					function (data) {
						let ret = "";
						for (let it in data) {
							ret +=
								encodeURIComponent(it) +
								"=" +
								encodeURIComponent(data[it]) +
								"&";
						}
						return ret;
					},
				],
				headers: {
					"Content-Type":
						"application/x-www-form-urlencoded; charset=UTF-8",
				},
			})
				.then((res) => {
					//console.log(res.data.data);
					this.resourceData1 = res.data.data;
					this.count = res.data.count;
					this.Sjtotal = res.data.count;
					this.IsLoading = false;
				})
				.catch((err) => {
					//console.log(err);
					this.IsLoading = false;
				});
		},
		handleIndexChangeSj(current) {
			// console.log(current);
			this.SjPage = current;
			this.GetList();
		},
		ToCompany(data) {
			this.$router.push({ name: "Company", params: { Keywords: data } });
			this.$cookies.set("TopActive", 2);
		},
		ToExpertDetail(id) {
			// let api = "ExpertDetail";
			// this.$router.push({ name: api, params: { id } });
			// this.$cookies.set("TopActive", 9);
		},
		SearchList() {
			this.GetList();
		},
	},
	mounted() {
		//console.log(this.$route.params.Type);
		//console.log(this.$route.params.Keywords);
		// if (this.$route.params.Type) {
		//   this.active = this.$route.params.Type;
		// }
		// if (this.$route.params.Keywords) {
		//   this.keywords = this.$route.params.Keywords;
		// }
		this.industrytypename = this.$cookies.get("industrytypename") || "";
		this.cityname = this.$cookies.get("cityname") || "";
		this.areaname = this.$cookies.get("areaname") || "";
		console.log(this.industrytypename, this.cityname, this.areaname);
		this.GetList();
	},
	components: {
		BottomInfo,
		TopInfo,
		TopTabs,
	},
};
</script>

<style scoped>
.matching {
	min-height: 800px;
}
.content {
	background-color: #f4f6fc;
	padding: 25px 0;
}
.filter-part {
	background-color: #fff;
	box-shadow: 0px 0px 9px 0px rgba(9, 90, 255, 0.05);
	margin: 0 auto;
	width: 1200px;
	padding: 25px;
	box-sizing: border-box;
	padding-bottom: 0;
}
.search-part {
	padding: 30px 280px;
	border-bottom: 1px solid #eeeeee;
}
.area,
.year {
	padding: 12px 0;
	border-bottom: 1px solid #eeeeee;
	box-sizing: border-box;
	overflow: hidden;
	color: #333;
	font-size: 14px;
}
.year {
	border-bottom: none;
}
.area .title,
.year .title {
	width: 120px;
	text-align: center;
	padding: 5px 8px;
	box-sizing: border-box;
}
.area-list,
.year-list {
	width: 1030px;
}
.area-list li,
.year-list li {
	float: left;
	cursor: pointer;
	margin-right: 20px;
	padding: 5px 8px;
}
.area-list li:last-child,
.year-list li:last-child {
	margin-right: 0;
}
.area-list li.active,
.year-list li.active {
	color: #fff;
	background-color: #095aff;
}
.area-list li:hover,
.year-list li:hover {
	color: #fff;
	background-color: #095aff;
}
.match-count {
	width: 1200px;
	margin: 25px auto;
	height: 50px;
	line-height: 50px;
	background: #ffffff;
	color: #333;
	font-size: 14px;
	text-align: center;
}
.match-count span {
	color: #095aff;
	font-weight: bold;
	margin: 0 5px;
}
.matching-list {
	width: 1200px;
	min-height: 400px;
	background: #ffffff;
	box-shadow: 0px 0px 9px 0px rgba(9, 90, 255, 0.05);
	margin: 0 auto;
	padding: 25px 35px;
	box-sizing: border-box;
}
.matching-list li {
	padding: 15px 30px;
	border-radius: 10px;
	color: #333333;
	font-size: 16px;
	cursor: pointer;
	position: relative;
}
.matching-list li:nth-child(2n + 1) {
	background: #f7f7f7;
}
.matching-list li .line1 {
	font-weight: bold;
	font-size: 18px;
	/* margin-bottom: 20px; */
}
.matching-list li .line2 {
	margin-bottom: 10px;
}
.matching-list li .line3 {
	margin-bottom: 10px;
	overflow: hidden;
}
.matching-list li .line4 {
	overflow: hidden;
}
.matching-list li .line1 .star {
	color: #ffd34c;
	font-size: 30px;
	float: right;
	cursor: pointer;
}
.matching-list li .line1 .star2 {
	color: #ffd34c;
	font-size: 30px;
	float: right;
	cursor: pointer;
}
.pagin {
	width: 1200px;
	margin: 0 auto;
	padding-bottom: 20px;
	text-align: center;
	background: #ffffff;
	font-size: 14px;
}
.ct {
	top: 15px;
	left: 35%;
	position: absolute;
	width: 30%;
	text-align: center;
}
</style>
